/*
 * Copyright 2023 The Pigweed Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

@import url('https://fonts.googleapis.com/css2?family=Google+Sans&family=Roboto+Mono:wght@400;500&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block');

:root {
  background-color: var(--sys-log-viewer-color-bg);
  color-scheme: light dark;
  font-family: 'Google Sans', Arial, sans-serif;
  font-synthesis: none;
  font-weight: 400;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

:root {
  /* Material component properties */
  --md-icon-font: 'Material Symbols Rounded';
  --md-icon-size: 1.25rem;
  --md-filled-button-label-text-type: 'Google Sans', Arial, sans-serif;
  --md-outlined-button-label-text-type: 'Google Sans', Arial, sans-serif;
  --md-icon-button-unselected-icon-color: var(
    --md-sys-color-on-surface-variant
  );
  --md-icon-button-unselected-hover-icon-color: var(
    --md-sys-color-on-primary-container
  );

  /* Log View */
  --sys-log-viewer-view-outline-width: 1px;
  --sys-log-viewer-view-corner-radius: 0.5rem;
}

* {
  box-sizing: border-box;
}

button {
  font-family: 'Google Sans';
}

main {
  height: 100vh;
  padding: 2rem;
}

a {
  color: var(--md-sys-color-primary);
  font-weight: 500;
  text-decoration: inherit;
}

a:hover {
  color: var(--md-sys-color-secondary);
}

body {
  display: grid;
  place-content: start;
  margin: 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-primary: #a8c7fa;
    --md-sys-color-primary-60: #4c8df6;
    --md-sys-color-primary-container: #0842a0;
    --md-sys-color-on-primary: #062e6f;
    --md-sys-color-on-primary-container: #d3e3fd;
    --md-sys-color-inverse-primary: #0b57d0;
    --md-sys-color-secondary: #7fcfff;
    --md-sys-color-secondary-container: #004a77;
    --md-sys-color-on-secondary: #003355;
    --md-sys-color-on-secondary-container: #c2e7ff;
    --md-sys-color-tertiary: #6dd58c;
    --md-sys-color-tertiary-container: #0f5223;
    --md-sys-color-on-tertiary: #0a3818;
    --md-sys-color-on-tertiary-container: #c4eed0;
    --md-sys-color-surface: #131314;
    --md-sys-color-surface-dim: #131314;
    --md-sys-color-surface-bright: #37393b;
    --md-sys-color-surface-container-lowest: #0e0e0e;
    --md-sys-color-surface-container-low: #1b1b1b;
    --md-sys-color-surface-container: #1e1f20;
    --md-sys-color-surface-container-high: #282a2c;
    --md-sys-color-surface-container-highest: #333537;
    --md-sys-color-on-surface: #e3e3e3;
    --md-sys-color-on-surface-variant: #c4c7c5;
    --md-sys-color-inverse-surface: #e3e3e3;
    --md-sys-color-inverse-on-surface: #303030;
    --md-sys-color-outline: #8e918f;
    --md-sys-color-outline-variant: #444746;
    --md-sys-color-shadow: #000000;
    --md-sys-color-scrim: #000000;

    --md-sys-inverse-surface-rgb: 230, 225, 229;

    /* Log Viewer */
    --sys-log-viewer-color-bg: var(--md-sys-color-surface);

    /* Log View */
    --sys-log-viewer-color-view-outline: var(--md-sys-color-outline-variant);

    /* Log View Controls */
    --sys-log-viewer-color-controls-bg: var(
      --md-sys-color-surface-container-high
    );
    --sys-log-viewer-color-controls-text: var(
      --md-sys-color-on-surface-variant
    );
    --sys-log-viewer-color-controls-input-outline: transparent;
    --sys-log-viewer-color-controls-input-bg: var(--md-sys-color-surface);
    --sys-log-viewer-color-controls-button-enabled: var(
      --md-sys-color-primary-container
    );

    /* Log List */
    --sys-log-viewer-color-table-header-bg: var(
      --md-sys-color-surface-container
    );
    --sys-log-viewer-color-table-header-text: var(--md-sys-color-on-surface);
    --sys-log-viewer-color-table-bg: var(
      --md-sys-color-surface-container-lowest
    );
    --sys-log-viewer-color-table-text: var(--md-sys-color-on-surface);
    --sys-log-viewer-color-table-cell-outline: var(
      --md-sys-color-outline-variant
    );
    --sys-log-viewer-color-overflow-indicator: var(
      --sys-log-viewer-color-table-bg
    );
    --sys-log-viewer-color-table-mark: var(--md-sys-color-primary-container);
    --sys-log-viewer-color-table-mark-text: var(
      --md-sys-color-on-primary-container
    );
    --sys-log-viewer-color-table-mark-outline: var(
      --md-sys-color-outline-variant
    );

    /* Severity */
    --sys-log-viewer-color-error-bright: #e46962;
    --sys-log-viewer-color-surface-error: #601410;
    --sys-log-viewer-color-on-surface-error: #f9dedc;
    --sys-log-viewer-color-orange-bright: #ee9836;
    --sys-log-viewer-color-surface-yellow: #402d00;
    --sys-log-viewer-color-on-surface-yellow: #ffdfa0;
    --sys-log-viewer-color-debug: var(--md-sys-color-primary-60);
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --md-sys-color-primary: #0b57d0;
    --md-sys-color-primary-70: #7cacf8;
    --md-sys-color-primary-90: #d3e3fd;
    --md-sys-color-primary-95: #ecf3fe;
    --md-sys-color-primary-99: #fafbff;
    --md-sys-color-primary-container: #d3e3fd;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-on-primary-container: #041e49;
    --md-sys-color-inverse-primary: #a8c7fa;
    --md-sys-color-secondary: #00639b;
    --md-sys-color-secondary-container: #c2e7ff;
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-on-secondary-container: #001d35;
    --md-sys-color-tertiary: #146c2e;
    --md-sys-color-tertiary-container: #c4eed0;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-on-tertiary-container: #072711;
    --md-sys-color-surface: #ffffff;
    --md-sys-color-surface-dim: #d3dbe5;
    --md-sys-color-surface-bright: #ffffff;
    --md-sys-color-surface-container-lowest: #ffffff;
    --md-sys-color-surface-container-low: #f8fafd;
    --md-sys-color-surface-container: #f0f4f9;
    --md-sys-color-surface-container-high: #e9eef6;
    --md-sys-color-surface-container-highest: #dde3ea;
    --md-sys-color-on-surface: #1f1f1f;
    --md-sys-color-on-surface-variant: #444746;
    --md-sys-color-inverse-surface: #303030;
    --md-sys-color-inverse-on-surface: #f2f2f2;
    --md-sys-color-outline: #747775;
    --md-sys-color-outline-variant: #c4c7c5;
    --md-sys-color-shadow: #000000;
    --md-sys-color-scrim: #000000;

    --md-sys-inverse-surface-rgb: 49, 48, 51;

    /* Log Viewer */
    --sys-log-viewer-color-bg: var(--md-sys-color-surface);

    /* Log View */
    --sys-log-viewer-color-view-outline: var(--md-sys-color-outline);

    /* Log View Controls */
    --sys-log-viewer-color-controls-bg: var(--md-sys-color-primary-90);
    --sys-log-viewer-color-controls-text: var(
      --md-sys-color-on-primary-container
    );
    --sys-log-viewer-color-controls-input-outline: transparent;
    --sys-log-viewer-color-controls-input-bg: var(
      --md-sys-color-surface-container-lowest
    );
    --sys-log-viewer-color-controls-button-enabled: var(
      --md-sys-color-primary-70
    );

    /* Log List */
    --sys-log-viewer-color-table-header-bg: var(--md-sys-color-primary-95);
    --sys-log-viewer-color-table-header-text: var(--md-sys-color-on-surface);
    --sys-log-viewer-color-table-bg: var(
      --md-sys-color-surface-container-lowest
    );
    --sys-log-viewer-color-table-text: var(--md-sys-color-on-surface);
    --sys-log-viewer-color-table-cell-outline: var(
      --md-sys-color-outline-variant
    );
    --sys-log-viewer-color-overflow-indicator: var(
      --sys-log-viewer-color-table-bg
    );
    --sys-log-viewer-color-table-mark: var(--md-sys-color-primary-container);
    --sys-log-viewer-color-table-mark-text: var(
      --md-sys-color-on-primary-container
    );
    --sys-log-viewer-color-table-mark-outline: var(
      --md-sys-color-outline-variant
    );

    /* Severity */
    --sys-log-viewer-color-error-bright: #dc362e;
    --sys-log-viewer-color-surface-error: #fcefee;
    --sys-log-viewer-color-on-surface-error: #8c1d18;
    --sys-log-viewer-color-orange-bright: #f49f2a;
    --sys-log-viewer-color-surface-yellow: #fef9eb;
    --sys-log-viewer-color-on-surface-yellow: #783616;
    --sys-log-viewer-color-debug: var(--md-sys-color-primary);
  }
}
